<template>
  <div class="w-h-100">
    <i class="el-icon-s-data"></i>&ensp;
    <span class="text">首页</span>
    <div class="tage-box">
      <!--
          字符串：“1”  A
          number:1    B

          A==B?true    比较的时候：值相同
          A===B?false  比较的时候：值必须相同且数据类型也必须相同

      -->
      <el-tag :class="{tag: active===tag.name}" v-for="tag in tags"
              :key="tag.name"
              @click="handleClick(tag)"
              @close="handleClose(tag)"
              :closable="closable"
              style="margin: 5px 5px"
      >{{ tag.name }}
      </el-tag>

    </div>
  </div>
</template>

<script>

export default {
  name: 'TopNav',
  data() {
    return {
      closable: false,
      icon: '',
      tags:[
        {path: "/home/index", name: "首页"},
      ],
      active: "首页",
    };
  },
  props: ["tagValue", "getTopData"],
  watch: {
    tagValue(val) {
      //1、判断已有的数组里，是否已存在，不存在则新增，否则只做跳转操作
      if (this.tags.filter(item => item.path === val.path).length === 0) {
        this.tags.push(val)
        this.closable = true
      }
      //高亮效果
      this.active = val.name
      console.log("顶部导航栏接受到了父组件的参数", val)
    }
  },
  mounted() {
    console.log("顶部导航组件挂载完成。。。")
  },
  methods: {
    handleClose(tag) {
      //删除标签
      this.tags.splice(this.tags.indexOf(tag), 1);
      //给最后一个高亮--->通过关闭函数传递过来的参数，去原来的数组过滤b
      const  last=this.tags[this.tags.length-1]
      this.active=last.name
      //路由跳转到最后一个
      this.$router.push({path: last.path})
      //左边高亮
      this.$bus.$emit("gaoliang", last.path)
      //隐藏/打开 tag标签的小叉叉
      this.closable = this.tags.length !== 1


    },
    //点击事件
    handleClick(tag) {

      this.$router.push({path: tag.path}, () => {
      })
      //子组件调用函数传递对象给父组件(激活事件$emit(事件名字，回调函数实参)）
      this.$emit("topOfParent", tag)
      this.$bus.$emit("gaoliang", tag.path)
      //高亮效果
      this.active = tag.name
      //1、TopNav组件给父亲传参数：对象（是单个标签对象，这里用到的是path）
      //方法：回调函数
      //先在父亲身上写回调函数，儿子身上用这个回调函数

      //2、父亲组件，通过props给LeftNav儿子组件，传递参数（对象）

      //3、LeftNav组件接收对象，并且watch数据变化，
    }
  },

}
</script>

<style scoped>
.text {
  color: #909399;
  font-size: 14px;
}

.tage-box {
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.tag {
  background-color: #304156;
  color: white;
}
</style>
